import {PlusOutlined} from '@ant-design/icons';
import {
    ModalForm,
    ProForm,
    ProCard,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
} from '@ant-design/pro-components';
import {Button, Form, message} from 'antd';
import type {DatePickerProps} from 'antd';
import {DatePicker, Space} from 'antd';
import {ProFormDateTimeRangePicker} from "@ant-design/pro-form";
import {ProFormDatePicker, ProFormTextArea} from "@ant-design/pro-form/lib";
import SingleUpload from "@/components/FileUpload";
import MultiUpload from "@/components/FileUpload/multi";
import {useEffect, useState} from "react";
import {addModel} from "@/services/chatter";

// const {run: addnewModel} = useRequest(addModel, {
//     manual: true,
//     onSuccess: (res) => {
//         console.log("addLog", res);
//     }
// });

export default (props) => {
    if (!props) {
        return;
    }
    const {reloadTable} = props;
    const [avatar, setAvatar] = useState(null);
    const [photos, setPhotos] = useState([]);
    const [publicAlbum, setPublicAlbum] = useState([]);
    const [privateAlbum, setPrivateAlbum] = useState([]);
    const [form] = Form.useForm<{ name: string; company: string }>();
    return (
        <ModalForm<{
            name: string;
            company: string;
        }>
            title="Add models"
            trigger={
                <Button type="primary">
                    <PlusOutlined/>
                    Add
                </Button>
            }
            form={form}
            autoFocusFirstInput
            modalProps={{
                destroyOnClose: true,
                onCancel: () => console.log('run'),
            }}
            submitTimeout={2000}
            onFinish={async (values) => {
                if (avatar == null) {
                    message.error("avatar cant be null!!!")
                    return false;
                }
                values.avatar = avatar;
                if (photos.length == 0) {
                    message.error("photos cant be null!!!")
                    return false;
                }
                values.photos = Array.from(photos);
                if (publicAlbum.length == 0) {
                    message.error("publicAlbum cant be null!!!")
                    return false;
                }
                values.publicAlbum = Array.from(publicAlbum);
                if (values.modelType == '2' && privateAlbum.length == 0) {
                    message.error("privateAlbum cant be null!!!")
                    return false;
                }
                values.privateAlbum = Array.from(privateAlbum);
                console.log(values);

                addModel(values).then(res => {
                    // relativesRef.current?.reload()
                    console.log(222, res);
                    setAvatar(null);
                    setPhotos([]);
                    setPublicAlbum([]);
                    setPrivateAlbum([]);
                    reloadTable();
                    message.success("success");
                })
                return true;
            }}
        >

            <ProCard
                title="Basic Info"
                bordered
            >
                <ProForm.Group>
                    <ProFormText
                        width="md"
                        name="nickName"
                        label="Name"
                        rules={[{required: true}]}
                    />


                    <ProFormSelect
                        request={async () => [
                            {
                                value: '1',
                                label: 'male',
                            },
                            {
                                value: '2',
                                label: 'female',
                            }, {
                                value: '3',
                                label: 'others',
                            },
                        ]}
                        width="md"
                        name="gender"
                        label="Gender"
                        rules={[{required: true}]}
                    />

                    <ProFormSelect
                        request={async () => [
                            {
                                value: '3',
                                label: 'M',
                            },

                        ]}
                        width="md"
                        name="modelType"
                        label="ModelType"
                        rules={[{required: true}]}
                    />

                    <ProFormDatePicker name="dob" label="DOB" rules={[{required: true}]}/>
                    <ProFormSelect
                        request={async () => [
                            {
                                value: '1',
                                label: 'male',
                            },
                            {
                                value: '2',
                                label: 'female',
                            },
                            {
                                value: '3',
                                label: 'others',
                            },
                        ]}
                        width="md"
                        name="lookingFor"
                        label="Looking For"
                        rules={[{required: true}]}
                    />

                    <ProFormSelect
                        request={async () => [
                            {
                                value: '1',
                                label: 'Making new friends',
                            },
                            {
                                value: '2',
                                label: 'Seeking a long-term partner',
                            },
                            {
                                value: '3',
                                label: 'Looking for a dating partner',
                            },
                        ]}
                        width="md"
                        name="whyYouHere"
                        label="Why you here"
                        rules={[{required: true}]}
                    />
                    <ProFormSelect
                        fieldProps={{
                            mode: 'multiple',
                        }}
                        request={async () => [
                            {
                                value: '1',
                                label: 'Art',
                            },
                            {
                                value: '2',
                                label: 'Adventure',
                            },
                            {
                                value: '3',
                                label: 'Photography',
                            },
                            {
                                value: '4',
                                label: 'Pets',
                            },
                            {
                                value: '5',
                                label: 'Parties',
                            },
                            {
                                value: '6',
                                label: 'Theater',
                            },
                            {
                                value: '7',
                                label: 'Reading',
                            },
                            {
                                value: '8',
                                label: 'Exercise',
                            },
                            {
                                value: '9',
                                label: 'Music',
                            },
                            {
                                value: '10',
                                label: 'Games',
                            },
                            {
                                value: '11',
                                label: 'Outdoor',
                            },
                            {
                                value: '12',
                                label: 'Movies',
                            },
                            {
                                value: '13',
                                label: 'Traveling',
                            },
                            {
                                value: '14',
                                label: 'Fitness',
                            },
                        ]}
                        width="md"
                        name="interests"
                        label="Interests"
                        rules={[{required: true}]}
                    />
                    <ProFormTextArea
                        width="md"
                        name="aboutMe"
                        label="About me"
                        rules={[{required: true,min:80}]}
                    />

                    <ProFormSelect
                        fieldProps={{
                            mode: 'multiple',
                        }}
                        request={async () => [
                            {
                                value: '1',
                                label: 'Kisses',
                            },
                            {
                                value: '2',
                                label: 'Bondage',
                            },
                            {
                                value: '3',
                                label: 'Blingfolding',
                            },
                            {
                                value: '4',
                                label: 'Breakfast',
                            },
                            {
                                value: '5',
                                label: 'Sexting',
                            },
                            {
                                value: '6',
                                label: 'Outdoors',
                            },
                            {
                                value: '7',
                                label: 'Biting',
                            },
                            {
                                value: '8',
                                label: 'Toys',
                            },
                            {
                                value: '9',
                                label: 'Busbes',
                            },
                            {
                                value: '10',
                                label: 'Home Video',
                            },
                            {
                                value: '11',
                                label: 'Group Fun',
                            },
                            {
                                value: '12',
                                label: 'Being watched',
                            },
                            {
                                value: '13',
                                label: 'Wax Play',
                            },
                            {
                                value: '14',
                                label: 'Cuckold',
                            },
                            {
                                value: '15',
                                label: 'Feet',
                            },
                            {
                                value: '16',
                                label: 'Dirty Talk',
                            },
                            {
                                value: '17',
                                label: 'I\'m a dom',
                            },
                            {
                                value: '18',
                                label: 'I\'m a sub',
                            },
                            {
                                value: '19',
                                label: 'Switch',
                            },
                            {
                                value: '20',
                                label: 'Scent',
                            },
                            {
                                value: '21',
                                label: 'Massage',
                            },
                            {
                                value: '22',
                                label: 'Striptease',
                            },
                            {
                                value: '23',
                                label: 'Dress up',
                            },
                            {
                                value: '24',
                                label: 'BDSM',
                            },

                        ]}
                        width="md"
                        name="turnOns"
                        label="TurnOns"
                        rules={[{required: false}]}
                    />

                </ProForm.Group>
            </ProCard>
            <ProCard
                title="Photos Info"
                bordered
            >
                <ProForm.Group>
                    Avatar: <SingleUpload setUrl={(avatarUrl) => {
                    setAvatar(avatarUrl);
                }}/>
                </ProForm.Group>
                <ProForm.Group>
                    Photos: <MultiUpload setUrl={(Url) => {
                    photos.push(Url);
                    setPhotos(photos);
                }}/>
                </ProForm.Group>
            </ProCard>

            <ProCard
                title="Albums Info"
                bordered
            >
                <ProForm.Group>
                    Public Albums: <MultiUpload setUrl={(url) => {
                    publicAlbum.push(url);
                    setPublicAlbum(publicAlbum);
                    // setAvatar(avatarUrl);
                }}/>
                </ProForm.Group>
                <ProForm.Group>
                    Private Albums: <MultiUpload setUrl={(url) => {
                    privateAlbum.push(url);
                    setPrivateAlbum(privateAlbum);
                }}/>
                </ProForm.Group>
            </ProCard>

        </ModalForm>
    );
};